<template>
  <div style="text-align: center" :width="width" :height="height">
    <img ref="metaImg"  :width="width" :height="height"  @click="showImg()" :src="src"/>
    <el-dialog
      style="text-align:center"
      width="840px"
      height="620px"
      :visible.sync="dialogVisible">
      <div style="width: 800px;height: 600px">
        <img style="text-align: center" ref="lagreImg" @load="largeImgLoad(800, 600)" :src="src"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'mg_img',
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {
      showImg() {
        this.dialogVisible = true
      },
      metaImgLoad: function (maxWidth, maxHeight) {
        let objImg = this.$refs.metaImg
        this.imgLoad(maxWidth, maxHeight,objImg )
      },
      largeImgLoad: function (maxWidth, maxHeight) {
        let objImg = this.$refs.lagreImg
        this.imgLoad(maxWidth, maxHeight,objImg )
      },
      imgLoad(maxWidth, maxHeight, objImg){
        var img = new Image()
        img.src = objImg.src
        var hRatio
        var wRatio
        var Ratio = 1
        var w = img.width
        var h = img.height
        wRatio = maxWidth / w
        hRatio = maxHeight / h
        if (maxWidth === 0 && maxHeight === 0) {
          Ratio = 1
        } else if (maxWidth === 0) {
          if (hRatio < 1) {
            Ratio = hRatio
          }
        } else if (maxHeight === 0) {
          if (wRatio < 1) Ratio = wRatio
        } else if (wRatio < 1 || hRatio < 1) {
          Ratio = (wRatio <= hRatio ? wRatio : hRatio)
        }
        if (Ratio < 1) {
          w = w * Ratio
          h = h * Ratio
        }
        objImg.height = h
        objImg.width = w
      }
    },
    props: {
      src: {
        type: String
      },
      width: {
        type: Number,
        default: 82
      },
      height: {
        type: Number,
        default: 82
      }
    }
  }
</script>
